<script setup>
import {ref} from "vue";
import { showToast } from "../../../../utils/common";
const formRef = ref(null);
const formData = ref({
	name:"",
	description:"",
	sort:0
})

const rules = ref({
	name:[
		{ required: true, message: '分类名称必填', trigger: 'blur' },
		{ min: 2, max: 5, message: '名称在2~5位', trigger: 'blur' },
	]
})

const close =()=>{
	
}

const onSubmit = async()=>{
	if(!await formRef.value.validate(()=>{})) return showToast("存在校验不通过的字段")
}
</script>

<template>
	<view class="layout">
		<el-form ref="formRef" label-width="100px" :model="formData" :rules="rules">
			<el-form-item label="分类名称" prop="name">
				<el-input v-model="formData.name" placeholder="请输入分类名称" clearable></el-input>
			</el-form-item>
			
			<el-form-item label="分类描述">
				<el-input v-model="formData.description" placeholder="请输入分类描述" clearable></el-input>
			</el-form-item>
			
			<el-form-item label="排序">
				<el-input-number v-model="formData.sort" :min="0" :max="100"/>
			</el-form-item>
		</el-form>
		
		<view class="dialog-footer">
			<el-button @click="close">取消</el-button>
			<el-button type="primary" @click="onSubmit">确定</el-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	
</style>
